<template>
  <div class="title-box bdradius4">
    <div class="title-box-left" v-if="leftmodel" @click="goReturn">
        <img src="../../assets/img/return.png" alt="" />
    </div>
    <div class="title-box-cont">{{titlevalue ? titlevalue : $route.meta.title}}</div>
    <div class="title-box-right" v-if="rightmodel" @click="rightfun">{{rightvalue}}</div>
  </div>
</template>

<script>
  export default {
    data() {
      return {

      };
    },
    props: {
      titlevalue: {
        type: String,
        default: ''
      },
      leftmodel: {
        type: Boolean,
        default: false
      },
      rightmodel: {
        type: Boolean,
        default: false
      },
      rightvalue: {
        type: String,
        default: ''
      },
    },
    methods: {
      rightfun() {
        this.$emit("rightfun");
      },
      //返回上一页
      goReturn() {
        this.$router.go(-1);
        this.$emit("goReturn");
      },
    },
  };

</script>
<style lang="less" scoped>
  .title-box {
    height: 50px;
    width: 100%;
    background: #fff;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    // justify-content: space-between;
    position: relative;

    .title-box-left {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      //width: 5%;
      cursor: pointer;
      z-index: 2;
      margin-left: 20px;
    }

    .title-box-cont {
      color: #333333;
      font-weight: bold;
      font-size: 16px;
      font-family: PingFangSC-Semibold, PingFang SC;
      position: absolute;
      width: 100%;
      text-align: center;
      z-index: 1;
    }

    .title-box-right {
      height: 100%;
      display: flex;
      margin-right: 20px;
      align-items: center;
      color: rgb(54, 145, 215);
      font-size: 14px;
      cursor: pointer;
      z-index: 2;
      position: absolute;
      right: 0;
    }
  }

</style>
